<template>
  <div class="register-container">
    <div class="background-image">
      <img src="@/assets/img/login/background.png" alt="Background" />
    </div>
    <div class="auth-form-wrapper">
      <div class="auth-form">
        <h2>用户注册</h2>
        <form>
          <div class="form-group horizontal">
            <label for="username">用户名</label>
            <input 
              id="username" 
              type="text" 
              v-model="admin.username" 
              placeholder="请输入用户名"
              required
            >
          </div>
          <div class="form-group horizontal">
            <label for="email">邮箱</label>
            <input 
              id="email" 
              type="email" 
              v-model="admin.email" 
              placeholder="请输入邮箱"
              required
            >
          </div>
          <div class="form-group horizontal">
            <label for="password">密码</label>
            <input 
              id="password" 
              type="password" 
              v-model="admin.password" 
              placeholder="请输入密码(6-20位)"
              required
              minlength="6"
              maxlength="20"
            >
          </div>
          <div class="form-group horizontal">
            <label for="confirmPassword">确认密码</label>
            <input 
              id="confirmPassword" 
              type="password" 
              v-model="admin.confirmPassword" 
              placeholder="请再次输入密码"
              required
            >
          </div>
          <button type="button" class="submit-btn" @click="handleSubmit">注 册</button>
        </form>
        <p class="switch-text">
          已有账号？<router-link to="/login">立即登录</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      admin: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (this.admin.password !== this.admin.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      
      if (this.admin.password.length < 6) {
        alert('密码长度不能少于6位');
        return;
      }
      
      request.post("/users/register", this.admin).then(res => {
        if(res.code === '200') {
          this.$message({
            message: '注册成功',
            type: 'success'
          })
          alert(`注册成功，欢迎 ${this.admin.username}！`);
          this.$router.push('/login');
        } else {
          this.$message({
            message: res.msg || '注册失败，请稍后重试',
            type: 'error'
          });
        }
      }).catch(error => {
        console.error('注册请求失败:', error);
        this.$message({
          message: '请求失败，请检查网络或稍后重试',
          type: 'error'
        });
      });
    }
  }
}
</script>

<style scoped>
/* 新增的布局样式 */
.register-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-form-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding-right: 100px;
}

/* 优化原有表单样式 */
.auth-form {
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
}

.auth-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group.horizontal {
  display: flex;
  align-items: center;
}

.form-group.horizontal label {
  flex: 0 0 80px;
  margin-bottom: 0;
  margin-right: 10px;
  color: #555;
  font-weight: 500;
}

.form-group.horizontal input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background-color: #cfcfcf;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
  font-weight: 500;
}

.submit-btn:hover {
  background-color: #ff5500;
}

.switch-text {
  text-align: center;
  margin-top: 25px;
  color: #666;
}

.switch-text a {
  color: #4a6bdf;
  text-decoration: none;
  font-weight: 500;
}

.switch-text a:hover {
  text-decoration: underline;
}
</style>